<template>
	<view>
		<view class="">
			<view class="uni-list-cell-db">
				<picker @change="bindPickerChange" :value="index" :range="array" class="pick" :style="{'background-color':back.textBack,'color':back.textColor}">
					+<text class="uni-input" :style="{'background-color':back.inputBack,'color':back.inputColor}">{{array[index]}}</text>
					<image src="/static/img/icon_drop down@2x.png" mode=""></image>
				</picker>
			</view>
		</view>
	</view>
</template>
<script>
	import Myajax from "@/common/server.js"
	export default {
		data() {
			return {
				array: ['86'],
				// index: 0,
			}
		},
		props:{
			back:{
				textBack: '',
				textColor: '',
				inputBack: '',
				inputColor: ''
			},
			index:{
				type:Number,
				default:0
			}
		},
		methods: {
			bindPickerChange: function(e) {
				if(e){
					this.index = e.target.value
					this.$emit('bindPickerChange',{array:this.array,target:this.index});
					console.log({array:this.array,target:this.index},456)
				} else {
					this.$emit('bindPickerChange',{array:this.array,target:this.index});
				}
				
			},
			getList(){
				var that = this
				Myajax.ajax({
					method:'POST',
					url:'/countryCode/list',
					dataType:'json',
					success:function(res){
						if(res.data.success){
							// 表示该手机没有注册
							var date = res.data.data
							console.log(date,111)
							if(date){
								var list = []
								for(let i = 0; i < date.length; i++){
									list.push(date[i].code)
								}
								that.array = list
							} else {
								that.array = ['86']
							}
						} else {
							// 表示该手机已经被注册
							
						}
					}
				})
			}
		},
		mounted(){
			this.getList()
			this.bindPickerChange()
		}
	}
</script>

<style lang="less" scoped>
	.uni-list-cell-db{
		width:100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.pick{
			// background-color: #12151E;
			width:85%;
			text-align: left;
			.uni-input{
				// background-color: #12151E;
				width:80upx;
				display: inline-block;
				padding:0upx 10upx 0;
			}
		}
		image{
			width:20upx;
			height:13upx;
		}
	}
</style>